<template>
   <div class="content-container" direction="vertical">
        <!-- input -->
        <div>
            <el-container class="content-row">
                <div class="input-tip">
                    商品名称:
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.good"></el-input>
                </div>
                <div class="input-tip">
                    收货人:
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.consignee"></el-input>
                </div>
                
            </el-container>
            <el-container class="content-row">
                <div class="input-tip">
                    用户名称:
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.name"></el-input>
                </div>
                <div class="input-tip">
                    手机号:
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.phone"></el-input>
                </div>
                       
            </el-container>
        </div>
        <div class="content-row">
            <el-container>
                <el-button type="primary" @click="requestData">筛选</el-button>
                <el-button type="danger" @click="clear">清空筛选</el-button>
                <el-button type="primary" @click="exportData">导出</el-button>
                <el-button type="primary" @click="dispatchGoods">批量发货</el-button>
                <el-button type="primary" @click="exportDispatchGoods">下载批量发货样单</el-button>
            </el-container>
        </div>
        <!-- list -->
        <div>
            <el-tabs type="card" @tab-click="handleClick">
                <el-tab-pane label="全部"></el-tab-pane>
                <el-tab-pane label="未支付"></el-tab-pane>
                <el-tab-pane label="已支付"></el-tab-pane>
                <el-tab-pane label="待发货"></el-tab-pane>
                <el-tab-pane label="已发货"></el-tab-pane>
                <el-tab-pane label="支付超时"></el-tab-pane>
            </el-tabs>
            <el-table 
            ref="multipleTable" 
            :data="orderList" 
            tooltip-effect="dark" 
            style="width:100%" 
            @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="订单ID"
                width="100"
                prop="id">
                </el-table-column>
                <el-table-column
                label="用户邮箱"
                width="200"
                prop="bemail">
                </el-table-column>
                <el-table-column
                label="订单金额"
                width="100"
                prop="amount">
                </el-table-column>
                <el-table-column
                label="订单状态"
                width="200"
                prop="status">
                    <template #default="scope">
                        <el-tag size="medium" :type="scope.row.status==1 ? 'success' : 'danger'">{{ scope.row.status==1 ? '已完成' : '未完成' }}</el-tag>          
                    </template>    
                </el-table-column>
                <el-table-column
                label="下单时间"
                width="300"
                prop="orderdate">
                </el-table-column>
                <el-table-column
                label="订单详情"
                width="200">
                    <template #default="scope">
                        <el-button type="warning" @click="orderInfo(scope.row.id, scope.row.bemail,scope.row.status)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

   </div>
</template>

<script>
import Mock from '../../mock/Mock'
import Tools from '../../tools/Tools'
import axios from 'axios'


export default{
    data(){
        return {
            //订单列表数据
            orderList:[],
            //筛选订单的参数
            queryParam:{
                good:"",
                consignee:"",
                phone:"",
                name:"",
                payTime:"",
                sendTime:""
            },
            //当前选中的订单对象
            multipleSelection:[]
        }
    },
    mounted(){
        // this.orderList=Mock.getOrder(this.$route.params.type);
        let targetURL='http://localhost:8888/selectAllOrders';
        this.askOrders(targetURL);

    },
    //路由更新时刷新数据
    beforeRouteUpdate(to){
        // this.orderList=Mock.getOrder(to.params.type);
        let targetURL='http://localhost:8888/selectAllOrders';
        this.askOrders(targetURL);
    },
    methods:{
        //模拟请求数据
        requestData(){
            
            // this.orderList=Mock.getOrder(this.$route.params.type);
            let userName=this.queryParam.name;
            if(userName==""){
                this.$message({
                    type:'warning',
                    message:'筛选失败：用户名称不能为空！'
                })
            }else{
                this.$message({
                    type:'success',
                    message:'筛选请求参数: '+JSON.stringify(this.queryParam)
                });
                let targetURL='http://localhost:8888/selectOrderByUserName?username='+userName;
                this.askOrders(targetURL);
            }


        },
        // 切换Tab 刷新数据
        handleClick(tab){
            this.$message({
                type:'success',
                message:'切换tab刷新数据: '+tab.props.label
            })

            let targetURL='http://localhost:8888/selectAllOrders';
            let optLabel=tab.props.label;
            if(optLabel=="未支付")
                targetURL='http://localhost:8888/selectUnpaidOrders';
            else if(optLabel=="已支付")
                targetURL='http://localhost:8888/selectPaidOrders';
            
            // this.orderList=Mock.getOrder(this.$route.params.type);
            this.askOrders(targetURL);
        },
        //清空筛选项
        clear(){
            this.queryParam={
                good:"",
                consignee:"",
                phone:"",
                name:"",
                payTime:"",
                sendTime:""
            }
            this.orderList=Mock.getOrder(this.$route.params.type);
        },
        //导出订单
        exportData(){
            Tools.exportJson('订单.json', JSON.stringify(this.orderList));
        },
        // 导出选中的发货单
        exportDispatchGoods() {
            Tools.exportJson('发货单.json', JSON.stringify(this.multipleSelection));
        },
        // 处理多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 进行发货
        dispatchGoods() {
            this.$message({
                type:'success',
                message:'发货商品：' + JSON.stringify(this.multipleSelection)
            })
        },
        // 删除订单
        deleteItem(item) {
            this.orderList.splice(item, 1)
        },
        // 联系用户
        callUser(item) {
            console.log(item)
            this.$message({
                type:'success',
                message:'联系客户：' + item.phone
            })
        },
        askOrders(targetURL){
            axios.get(targetURL)
            .then(successResponse=>{
                this.orderList=successResponse.data;  
        
            }).catch(failResponse=>{
                alert("响应异常");
            })
        },
        orderInfo(oid,bemail,status){
            // this.$message({
            //     type:'success',
            //     message:'订单ID:' + oid+", 用户邮箱:"+bemail+", status:"+status
            // });
            this.$router.push({name:'orderDetail',params:{oid:oid,bemail:bemail, status:status}})
          
        }


    }
    

}
</script>